
import React from 'react';

import isEqual from 'lodash.isequal'

import FormControl from 'bee-form-control';
import 'bee-form-control/build/FormControl.css';

import Switch from 'bee-switch';
import 'bee-switch/build/Switch.css';
import cloneDeep from 'lodash.clonedeep';
import './index.less'

import { Col, Row } from 'bee-layout';
import 'bee-layout/build/Layout.css';
class Refer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            state: 'browse',
            disable: true,
            data: {
                scode: '',
                sname: '',
                enableStatus: '',
                pname: '',
                pcode: ''
            },
            oleData:{ }
        };
    }

    componentDidMount() {

    }

    componentWillUnmount() {


    }
    onChange = (value, key) => {

        let {data}  = cloneDeep(this.state);
        console.log(111, data)
        if (key == 'enableStatus') {
            value = value ? "1" : "0"
        }
        if (key === 'scode' && data.pcode !== "topVirtual") {
            let compre = value.substring(0, data.pcode.length)
            if (value.length <= data.pcode.length) {
                value = data.pcode;
            }
            if (compre !== data.pcode) {
                value = data.scode;
            }
        }
        this.setState({
            data: { ...data, [key]: value }
        }, () => {
            this.props.onFormAfter && this.props.onFormAfter(key, value, this.state.data)
        })
    }
    onClick = () => {

    }

    render() {
        let { state } = this.state;
        return (
            <div className="treeCard">
                {
                    state === 'edit' ? this.editFormUI() : this.browseFormUI()
                }
            </div>
        )
    }
    setFormState = (state, buttonKey) => {
        let newState = state == 'add' ? 'edit' : state;
        let disable = newState == 'edit' ? true : false;
        if (buttonKey === 'refresh') {
            disable = true
        }
        this.setState({
            state: newState,
            disable
        })
    }
    setFormData = ({ data, isCache = true, callBack }) => {
        let state = { data };
        isCache && (state.oleData = cloneDeep(data));
        console.log(state)
        this.setState({ ...state }, () => {
            callBack && callBack()
        })
    }
    getFormData = () => {
        let { data, oleData } = this.state
        return {
            data,
            oleData,
        }
    }
    resetFormData = () => {
        console.log(this.state.oleData)
        this.setFormData({data: this.state.oleData})
    }
    editFormUI = () => {
        let { data: { scode, sname, enableStatus, pname } } = this.state;
        enableStatus = enableStatus == "1" ? true : false
        return <Row>
            <Col md={4} xs={4} sm={4}>
                <div className='form-item form-item-diff'>
                    部位编码
                    <FormControl
                        className="col-control"
                        value={scode == "topVirtual"? '' : scode}
                        onChange={(value) => this.onChange(value, 'scode')}
                    />
                </div>
            </Col>
            <Col md={4} xs={4} sm={4}>
                <div className='form-item'>
                    部位名称
                    <FormControl
                        className="col-control"
                        value={sname}
                        onChange={(value) => this.onChange(value, 'sname')}
                    />
                </div>
            </Col>
            <Col md={4} xs={4} sm={4}>
                <div className='form-item'>
                    启用状态
                <Switch
                        className="col-switch"
                        checked={enableStatus}
                        disabled={true}
                        onChange={(value) => this.onChange(value, "enableStatus")}
                    />
                </div>
            </Col>
            <Col md={4} xs={4} sm={4}>
                <div className='form-item form-item-diff form-item_self'>
                    父级名称
                    <div className='browse-content'>{pname}</div>
                </div>
            </Col>
        </Row>
    }
    browseFormUI = () => {
        let { data: { scode, sname, enableStatus, pname } } = this.state;
        if (enableStatus == "1") {
            enableStatus = true
        } else if (enableStatus == "0") {
            enableStatus = false
        }
        return <Row>
            <Col md={4} xs={4} sm={4}>
                <div className='form-item form-item-diff'>
                    部位编码
                    <div className='browse-content'>{scode == "topVirtual"? '' : scode}</div>
                </div>
            </Col>
            <Col md={4} xs={4} sm={4}>
                <div className='form-item'>
                    部位名称
                    <div className='browse-content'>{sname}</div>
                </div>
            </Col>
            <Col md={4} xs={4} sm={4}>
                <div className='form-item'>
                    启用状态
                    <Switch
                        className="col-switch"
                        checked={enableStatus}
                        disabled={scode !== 'topVirtual'? false: true}
                        onChange={(value) => this.onChange(value, "enableStatus")}
                    />
                </div>
            </Col>
            <Col md={4} xs={4} sm={4}>
                <div className='form-item form-item-diff  form-item_self'>
                    父级名称
                    <div className='browse-content'>{pname}</div>
                </div>
            </Col>
        </Row>
    }
}


export default Refer;